<template>
  <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" :size="formSize"
    status-icon>
    <el-form-item label="商品分类" prop="name">
      <el-cascader v-model="value" :options="options" @change="handleChange" />
    </el-form-item>
    <el-form-item label="商品名称" prop="desc">
      <el-input v-model="ruleForm.desc" type="textarea" placeholder="请输入商品名称" />
    </el-form-item>
    <el-form-item label="商品简介" prop="desc">
      <el-input v-model="textarea" :rows="2" type="textarea" placeholder="请输入商品简介(100字)" />
    </el-form-item>
    <el-form-item label="商品价格" prop="desc">
      <el-input v-model="ruleForm.desc" type="number" placeholder="请输入商品价格" />
    </el-form-item>
    <el-form-item label="商品售卖价" prop="desc">
      <el-input v-model="ruleForm.desc" type="number" placeholder="请输入商品售价" />
    </el-form-item>
    <el-form-item label="商品库存" prop="desc">
      <el-input v-model="ruleForm.desc" type="number" placeholder="请输入商品库存" />
    </el-form-item>
    <el-form-item label="商品标签" prop="desc">
      <el-input v-model="ruleForm.desc" type="textarea" placeholder="请输入商品小标签" />
    </el-form-item>
    <el-form-item label="Activity zone" prop="region">
      <el-select v-model="ruleForm.region" placeholder="Activity zone">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item label="Activity count" prop="count">
      <el-select-v2 v-model="ruleForm.count" placeholder="Activity count" :options="options" />
    </el-form-item>
    <el-form-item label="Activity time" required>
      <el-col :span="11">
        <el-form-item prop="date1">
          <el-date-picker v-model="ruleForm.date1" type="date" label="Pick a date" placeholder="Pick a date"
            style="width: 100%" />
        </el-form-item>
      </el-col>
      <el-col class="text-center" :span="2">
        <span class="text-gray-500">-</span>
      </el-col>
      <el-col :span="11">
        <el-form-item prop="date2">
          <el-time-picker v-model="ruleForm.date2" label="Pick a time" placeholder="Pick a time" style="width: 100%" />
        </el-form-item>
      </el-col>
    </el-form-item>
    <el-form-item label="Instant delivery" prop="delivery">
      <el-switch v-model="ruleForm.delivery" />
    </el-form-item>
    <el-form-item label="Activity type" prop="type">
      <el-checkbox-group v-model="ruleForm.type">
        <el-checkbox label="Online activities" name="type" />
        <el-checkbox label="Promotion activities" name="type" />
        <el-checkbox label="Offline activities" name="type" />
        <el-checkbox label="Simple brand exposure" name="type" />
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="Resources" prop="resource">
      <el-radio-group v-model="ruleForm.resource">
        <el-radio label="Sponsorship" />
        <el-radio label="Venue" />
      </el-radio-group>
    </el-form-item>
    <el-form-item label="Activity form" prop="desc">
      <el-input v-model="ruleForm.desc" type="textarea" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">Create</el-button>
      <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  export default {
    name: 'ADD',
  }
</script>
<script setup>
  // import { ref } from "vue" 
</script>

<style lang="less" scoped>

</style>